<template>
  <div>
 <div class="container">
            <div style="text-align: center">
            </div>
            <div class="panel panel-primary">
              <div class="panel-heading" style="background-color:#409EFF">
                <h3 class="panel-title">数据表格</h3>
              </div>
              <div class="panel-body">
                <form class="form-inline">
                  <div class="row">
      
                    <div class="form-group col-sm-4">
                      <label>学号:</label>
                      <input
                        type="name"
                        class="form-control"
                        id="exampleInputName3"
                        placeholder="学号"
                        v-model="sno"
                      />
                    </div>
                    <div v-if="this.userRole!=null" class="col-sm-7">
                      <button type="submit" @click="getBySno" style="background-color:#409EFF" class="btn btn-primary">
                        搜索
                      </button>
                    </div>
                  </div>
                </form>

                <div class="table-responsive">
                <table class="table table-hover" style="margin-top: 2px">
                    <thead>
                    <tr>
                      <th></th>
                      <th>学号</th>
                      <th>姓名</th>
                      <th>系</th>
                      <th>课程号</th>
                      <th>课程名称</th>
                      <th>任课老师</th>
                      <th>期末成绩</th>
                      <th>学期</th>
                      <th>删除</th>
                      <th>新增</th>
                    </tr>
                  </thead>
                  <tbody  v-for="(AllGrade,index) in AllGrade" :key="index">
                    <tr  v-show="!is_edit">
                      <td>
                       
                      </td>
                      <td>{{AllGrade.sno}}</td>
                      <td>{{AllGrade.sname}}</td>
                      <td>{{AllGrade.sdept}}</td>
                      <td>{{AllGrade.cno}}</td>
                      <td>{{AllGrade.cname}}</td>
                      <td>{{AllGrade.tname}}</td>
                      <td>{{AllGrade.grade}}</td>
                      <td>{{AllGrade.term}}</td>
                      <td v-show="!is_edit"><i @click="edit" class="el-icon-edit" style="font-size:25px"></i></td>
                       <td v-show="is_edit"><i class="el-icon-check" style="font-size:25px"></i></td>
                        <td><i @click="del(AllGrade.sno)" class="el-icon-delete" style="font-size:25px"></i></td>
                      <td><i @click="add()" class="el-icon-circle-plus" style="font-size:30px"></i></td>
                    </tr>

                    <tr  v-show="is_edit">
                      <td>
                      </td>
                      <td scope="row"><input style="width:50px" class="w-50" type="text" v-model="AllGrade.sno"/></td>
                      <td><input style="width:60px" class="w-50" type="text" v-model="AllGrade.sname"/></td>
                      <td><input style="width:30px" class="w-50" type="text" v-model="AllGrade.sdept"/></td>
                      <td><input style="width:40px" class="w-50" type="text" v-model="AllGrade.cno"/></td>
                      <td scope="row"><input style="width:50px" class="w-50" type="text" v-model="AllGrade.cname"/></td>
                      <td><input style="width:60px" class="w-50" type="text" v-model="AllGrade.tname"/></td>
                      <td><input style="width:30px" class="w-50" type="text" v-model="AllGrade.grade"/></td>
                      <td><input style="width:40px" class="w-50" type="text" v-model="AllGrade.term"/></td>
                      <td  v-show="!is_edit"><i class="el-icon-edit" style="font-size:25px"></i></td>
                      <td v-show="is_edit"><i @click="save(AllGrade)" class="el-icon-check" style="font-size:25px"></i></td>
                    </tr>
                  </tbody>
                </table>
                </div>
              </div>
            </div>
          </div>

       <!-- 新增课程弹窗 -->
    <div>
<el-drawer
  title="新增成绩"
  :visible.sync="dialog"
  direction="ltr"
  ref="drawer"
  >
<el-form :model="grade" label-position="left" label-width="100px" class="demo-ruleForm">
  <el-form-item  >
    <el-form-item label="学号">
    <el-input v-model="grade.sno"></el-input>
  </el-form-item>
  <el-form-item label="姓名">
    <el-input v-model="grade.account"></el-input>
  </el-form-item>
  <el-form-item label="系">
    <el-input v-model="grade.sdept"></el-input>
  </el-form-item>
  <el-form-item label="课程号">
    <el-input v-model="grade.cno"></el-input>
  </el-form-item>
   <el-form-item label="课程名称">
    <el-input v-model="grade.cname"></el-input>
  </el-form-item>
  <el-form-item label="任课老师名">
    <el-input v-model="grade.tname"></el-input>
  </el-form-item>
  <el-form-item label="期末学生成绩">
    <el-input v-model="grade.grade"></el-input>
  </el-form-item>
  <el-form-item label="学期">
    <el-input v-model="grade.term"></el-input>
  </el-form-item>
  </el-form-item>
  </el-form>
  <div class="dip">
  <el-button type="primary" @click="submit()">提交</el-button>
  <el-button @click="clean">重置</el-button>
  <el-button @click="cancelForm">取消</el-button>
  </div>
</el-drawer>

    </div>



  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'grade',
    data(){
        return{
        dialog: false,
        is_edit:false,
        AllGrade:{},
        sno:'',
        grade:{
        sno:"",
        sname:"",
        sdept:"",
        cname:"",
        cno:"",
        tname:"",
        grade:"",
        term:""
      },
        }
    },
    methods:{
       //关闭新增弹窗
    cancelForm() {
      this.dialog = false;
      clearTimeout(this.timer);
    },
    //重置
    clean(){
      console.log("clean")
    },
    //搜索框执行函数
    getBySno(){
      console.log("按学号查询成绩")
         axios({
                url: `http://localhost:81/Scs/${this.sno}`,
                method: "GET",
            })
            .then(res=>{
              console.log(res.data)
              if(res.data.length!=0){
                      this.AllGrade=res.data
              }
            })
            .catch(err=>{
              alert("信息有误！！！")
              console.log(err)
            })
    },

    //保存修改
    save(AllGrade){
       console.log("保存修改")
       axios({
                url: "http://localhost:81/Scs",
                method: "PUT",
                data:JSON.stringify(AllGrade),
                headers : {
                'Content-Type':'application/json;charset=utf-8'
    },
            })
            this.is_edit=false;
    },

        //编辑信息
    edit(){
      console.log("编辑")
       this.is_edit=true;

    },
    //删除
    del(sno){
           this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           axios({
                url: "http://localhost:81/Scs",
                method: "delete",
                params:{sno}
    })
        this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getAllStudent()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },

      //新增
    add(){
      this.dialog = true
      console.log("新增")
      console.log(this.grade)
     
     
    },
        //查询全部成绩信息，管理员权限3
    getAllSc(){
    
      console.log("获取所有用户信息")
       axios({
                url: "http://localhost:81/Scs",
                method: "GET",
            })
            .then(res=>{
              console.log(res.data)
              if(res.data.length!=0){
                      this.AllGrade=res.data
              }
            })
            .catch(err=>{
              console.log(err)
            })
    },
    //提交新增
    submit(){
      axios({
                url: "http://localhost:81/Scs",
                method: "POST",
                data:JSON.stringify(this.grade),
                headers : {
                'Content-Type':'application/json;charset=utf-8'
    },
            }).then(res=>{
              console.log("添加课程成功"+res.data)
               this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.cancelForm()
          this.getAllUser()
            }).catch(err=>{
              console.log("添加学生失败"+err)
                 this.$message({
            type: 'fail',
            message: '添加失败!'
          });
            })
    },
    },
    created(){
      console.log(this.userRole)
      if(this.userRole!=null){
        this.getAllSc();
      }
     
    },
    //接受父组件传过来的userRole
    props:{
      userRole:Number,
      require:true
    }

}
</script>

<style>

</style>